<template>
  <div class="recordQuery">
    <van-nav-bar
      :title="$route.meta.title"
      left-arrow
      :border="false"
      @click-left="clickLeft"
      @click-right="clickRight">
      <template #right>
        <van-icon name="filter-o" size="24" />
      </template>
    </van-nav-bar>
    <div class="content" v-autoHeight>
      <div class="list width90">
        <div
          class="list-item"
          v-for="(item, index) in sampleArr"
          :key="index"
          :style="{ background: item.back }">
          <div class="itemLeft">
            <p :style="{ color: item.color }">
              {{ item.name }} {{ item.keepName }}
            </p>
          </div>
          <div class="itemRight">
            <van-button
              style="margin-left: 15px"
              type="info"
              size="small"
              @click="detail(item)">
              电子记录
            </van-button>
          </div>
        </div>
        <van-empty v-if="sampleArr.length <= 0" description="无数据" />
      </div>
    </div>
    <van-popup
      v-model="showFiltering"
      safe-area-inset-bottom
      get-container="body"
      position="right"
      style="width: 50vw; height: 100% !important">
      <div class="popup-content">
        <div class="popup-content__content">
          <van-row>
            <van-col span="24">
              <van-field
                v-if="isRouterAlive"
                v-model="materialType"
                name="materialType"
                label="检验类型"
                input-align="center">
                <template #input>
                  <material-type v-model="materialType" />
                </template>
              </van-field>
            </van-col>
            <van-col span="24">
              <van-field
                v-if="isRouterAlive"
                v-model="materialCode"
                name="materialCode"
                label="检验名称"
                input-align="center">
                <template #input>
                  <material-name
                    :materialType="materialType"
                    v-model="materialCode" />
                </template>
              </van-field>
            </van-col>
            <van-col span="24">
              <van-field
                v-if="isRouterAlive"
                v-model="startDate"
                name="startDate"
                label="开始日期"
                input-align="center">
                <template #input>
                  <PickerDateOne v-model="startDate" />
                </template>
              </van-field>
            </van-col>
            <van-col span="24">
              <van-field
                v-if="isRouterAlive"
                v-model="endDate"
                name="endDate"
                label="结束日期"
                input-align="center">
                <template #input>
                  <PickerDateOne v-model="endDate" />
                </template>
              </van-field>
            </van-col>
          </van-row>
        </div>

        <div class="popup-content__footer">
          <van-button block @click="handleReset">重置</van-button>
          <van-button
            native-type="button"
            type="info"
            block
            @click.stop="handleFilter"
            >筛选</van-button
          >
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script type="text/ecmascript-6">
import { GetRecordQueryTree } from '@/api/recordQuery';
import MaterialName from "@/components/MaterialName";
import MaterialType from "@/components/MaterialType";
import PickerDateOne from "@/components/PickerDateOne";
import {
  Button,
  Cell,
  Col,
  Empty,
  Field,
  Icon,
  List,
  NavBar,
  Notify,
  Popup,
  PullRefresh,
  Row,
  Sidebar,
  SidebarItem,
  SwipeCell,
  Tag,
  TreeSelect
} from "vant";
export default {
  name: 'recordQuery',
    components: {
      PickerDateOne,
    [Field.name]: Field,
    [NavBar.name]: NavBar,
    [Icon.name]: Icon,
    [Sidebar.name]: Sidebar,
    [SidebarItem.name]: SidebarItem,
    [List.name]: List,
    [Cell.name]: Cell,
    [PullRefresh.name]: PullRefresh,
    [Tag.name]: Tag,
    [Popup.name]: Popup,
    [Button.name]: Button,
    [TreeSelect.name]: TreeSelect,
    [SwipeCell.name]: SwipeCell,
    [Col.name]: Col,
    [Row.name]: Row,
    [Notify.name]: Notify,
    [Empty.name]: Empty,
    MaterialType,
    MaterialName,
  },
  data() {
    return {
      token: '',
      sampleArr: [],
      scanShow: false,
      result: [],
      showFiltering: false,
      isRouterAlive: true,
      materialCode: '',
      materialType: '',
        startDate:'',
        endDate:'',
    };
  },
  beforeUnmount() {
    if (scan && scan != '') {
      scan.close();
    }
  },
  methods: {
    clickLeft() {
      this.$router.replace({ name: 'home' });
    },
    detail(item) {
      this.$router.push({
        name: 'recordDetail',
        query: { param: JSON.stringify(item) }
      });
    },
    clickRight() {
      this.showFiltering = true;
    },
    handleReset() {
      this.isRouterAlive = false;
      this.$nextTick(() => (this.isRouterAlive = true));
      this.materialType = "";
      this.materialCode = "";
    },
    handleFilter() {
      let startDate = new Date(this.startDate).getTime();
      let endDate = new Date(this.endDate).getTime();
      if(startDate>endDate) this.$toast('开始日期不能大于结束日期')
      this.getSampleData();
    },
    // 过滤方法
    flattenChildren(arr) {
      let result = [];
      arr.forEach((item) => {
        if (item.children&&item.children.length) {
          if(item.recordCode){
            result.push(item);
          }else{
            result = result.concat(
            this.flattenChildren(
              item.children,
            )
          );
          }

        }
      });
      return result;
    },
    getSampleData() {
      let that = this;
      let queryParams = {
        pageModel: { Token: that.token, Search: [this.materialType||"", this.materialCode||"" ,this.startDate||"",this.endDate||""] }
      };
      GetRecordQueryTree(queryParams).then((res) => {
        let allChildren = that.flattenChildren(res.Result);
        that.sampleArr = allChildren;
        console.log(allChildren);
      });
    },
  },
  mounted() {},
  created() {
    this.token = localStorage.getItem('tokenKey');
    this.getSampleData();
  }
};
</script>
<style scoped lang="less">
.width90 {
}
.configDetail {
  // height: 100vh;
  // width: 100%;
}
.content {
  box-sizing: border-box;
  padding: 0 20px;
  // overflow: auto;
  // display: flex;
  // flex-direction: column;
  // align-items: center;
}
.popup-content__footer {
  padding: 5px;
  box-sizing: border-box;
  display: flex;
  gap: 10px;
  button {
    height: 30px;
  }
}
.list {
  margin-top: 10px;
  box-sizing: border-box;
  .list-item {
    width: 100%;
    background: #f3f3f3;
    margin-bottom: 10px;
    padding: 10px 0;
    border-radius: 4px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    .itemLeft {
      font-size: 12px;
      margin-left: 15px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      p {
        padding: 5px 0;
      }
    }

    .itemRight {
      margin-right: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>
